<template>
  <view class="task-item" @click="handleClick">
    <view class="task-header">
      <text class="task-title">{{ task.title }}</text>
      <text class="task-time">{{ task.time }}</text>
    </view>
    <view class="task-content">{{ task.content }}</view>
    <view class="task-footer">
      <view :class="['task-type', getTaskTypeClass]">{{ getTaskTypeText }}</view>
      <view :class="['task-status', getTaskStatusClass]">{{ getTaskStatusText }}</view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  task: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['click']);

const handleClick = () => {
  emit('click', props.task);
};

// 获取任务类型样式
const getTaskTypeClass = computed(() => {
  const typeMap = {
    appeal: 'type-appeal',
    verify: 'type-verify',
    message: 'type-message',
    workorder: 'type-workorder'
  };
  return typeMap[props.task.type] || '';
});

// 获取任务类型文本
const getTaskTypeText = computed(() => {
  const typeTextMap = {
    appeal: '订单申诉',
    verify: '车辆认证',
    message: '咨询留言',
    workorder: '工单派发'
  };
  return typeTextMap[props.task.type] || '其他';
});

// 获取任务状态样式
const getTaskStatusClass = computed(() => {
  const statusMap = {
    pending: 'status-pending',
    processing: 'status-processing',
    processed: 'status-processed'
  };
  return statusMap[props.task.status] || '';
});

// 获取任务状态文本
const getTaskStatusText = computed(() => {
  const statusTextMap = {
    pending: '待处理',
    processing: '处理中',
    processed: '已处理'
  };
  return statusTextMap[props.task.status] || '未知';
});
</script>

<style lang="scss" scoped>
.task-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.task-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.task-time {
  font-size: 24rpx;
  color: #999999;
}

.task-content {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-type, .task-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

/* 任务类型样式 */
.type-appeal {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-verify {
  background-color: #f6ffed;
  color: #52c41a;
}

.type-message {
  background-color: #fff7e6;
  color: #fa8c16;
}

.type-workorder {
  background-color: #f9f0ff;
  color: #722ed1;
}

/* 任务状态样式 */
.status-pending {
  background-color: #fff1f0;
  color: #f5222d;
}

.status-processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-processed {
  background-color: #f6ffed;
  color: #52c41a;
}
</style>